<!-- 分页 -->
<template>
  <div class="container-pagination">
    <p>
      设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。
      <br />分页元素如下： prev (上一页按钮), next (下一页按钮), pager
      (分页列表), jumper (跳转), total (总计), sizes (每页条数选择) 和 -> (every
      element after this symbol will be pulled to the right).
    </p>
    <div class="example-pagination-block">
      <div class="example-demonstration">When you have few pages</div>
      <el-pagination
        background
        layout="prev, pager, next, jumper, ->, total"
        :page-size="11"
        :total="50"
      />
    </div>
    <div class="example-pagination-block">
      <div class="example-demonstration">When you have more than 7 pages</div>
      <el-pagination layout="prev, pager, next" :total="1000" />
    </div>
    <el-switch v-model="value" />
    <el-pagination
      :hide-on-single-page="value"
      :total="5"
      layout="prev, pager, next"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const value = ref(false);
</script>

<style scoped>
.container-pagination {
  padding: 20px;
}
.example-pagination-block + .example-pagination-block {
  margin-top: 10px;
}
.example-pagination-block .example-demonstration {
  margin-bottom: 16px;
}
</style>
